<template>
  <div class="card-list">
    <a-list
        :grid="{gutter: 24, lg: 4, md: 3, sm: 2, xs: 1}"
        :dataSource="dataSource"
    >
      <a-list-item slot="renderItem" slot-scope="item">
        <template v-if="item.add">
          <a-button @click="showAdd" class="new-btn" type="dashed">
            <a-icon type="plus"/>
            添加用户
          </a-button>
        </template>
        <template v-else>
          <a-card :hoverable="true">
            <a-card-meta>
              <div style="margin-bottom: 3px" slot="title">用户序号:{{ item.id }}
                <a-popconfirm title="Sure Delete?" @confirm="deleteAccount(item.id)" ok-text="Yes" cancel-text="No">
                  <a-icon style="float:right;margin-top:3px;" class="copy" type="delete"/>
                </a-popconfirm>
              </div>
            </a-card-meta>
            <a-divider/>
            <p style="width: 200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
              用户名:{{ item.username }}
            </p>
            <p style="width: 200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
              状态:{{ item.status }}
            </p>
            <a slot="actions" @click="changeAccountInfo(item.id)"> 修改密码</a>
          </a-card>
        </template>
      </a-list-item>
    </a-list>
    <a-modal v-model="infoVisible" title="修改密码" @ok="handleOk">
      新密码:
      <a-input v-model="userPass.newPass" placeholder="新的密码"/>
    </a-modal>
    <a-modal :width="700" v-model="addVisible" :footer="null" title="添加用户">
      <a-form-model :model="newUser" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
        <a-form-model-item  required porp="assetsName" label="用户名">
          <a-input v-model="newUser.username" placeholder="请输入用户名"/>
        </a-form-model-item>
        <a-form-model-item required porp="assetsIp" label="用户密码">
          <a-input v-model="newUser.userPass" required placeholder="请输入用户密码"/>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="onSubmitAssets">
            Create
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <div>
      <a-pagination
          :default-current="1"
          :total=total
          :pageSize=pageSize
          @change="nextPage"
      />
    </div>
  </div>
</template>

<script>
import {listUsers, deleteUser, updatePassword, createUser} from '@/services/user'
import {createAsset} from "@/services/assets";

export default {
  name: 'Manage',
  i18n: require('./i18n'),
  data() {
    return {
      pageSize: 15,
      extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
      dataSource: [],
      total: 0,
      newUser:{},
      addVisible:false,
      infoVisible: false,
      userPass: {
        userId: undefined,
        newPass: ''
      }
    }
  },
  computed: {
    desc() {
      return "用户管理"
    }
  },
  mounted() {
    this.loadingData();
  },
  methods: {
    deleteAccount(userId) {
      let that = this
      deleteUser(userId).then((res) => {
        if (res.data.result === 'success') {
          that.$message.success("删除成功:" + userId)
        } else {
          that.$message.error("删除失败:" + accountId)
        }
        that.loadingData()
      })

    },
    loadingData() {
      let that = this
      listUsers(1, this.pageSize).then((res) => {
        let data = res.data
        that.total = data.total
        that.dataSource = data['users']
        that.dataSource.push({
          add: true
        })
      })
    },
    nextPage(page) {
      let that = this
      listUsers(page, this.pageSize).then((res) => {
        let data = res.data
        that.total = data.total
        that.dataSource = data['users']
        that.dataSource.push({
          add: true
        })
      })
    },
    handleOk() {
      let that = this
      if (this.userPass.userId === undefined) {
        this.$message.error("修改失败")
      } else {
        updatePassword(this.userPass.userId, this.userPass.newPass).then((res) => {
          if (res.data.result === 'success') {
            that.$message.success("修改成功:" + that.userPass.userId)
            that.userPass.newPass = ''
            that.userPass.userId = undefined
          } else {
            that.$message.error("修改失败:" + that.userPass.userId)
          }
        })
      }
      this.infoVisible = false
    },
    changeAccountInfo(userId) {
      this.userPass.userId = userId
      this.infoVisible = true
    },
    showAdd(){
      this.addVisible=true
    },
    onSubmitAssets() {
      let that = this
      console.log(this.newAsset)
      createUser(this.newUser.username,this.newUser.userPass).then((res) => {
        //console.log(res)
        if(res.data.result==="success"){
          that.$message.success("添加成功")
        }else{
          that.$message.error("添加失败")
        }
        that.loadingData()
      })

      this.addVisible = false
      this.newUser = {}

    },
  }

}
</script>

<style lang="less" scoped>
.card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 48px;
}

.new-btn {
  border-radius: 2px;
  width: 100%;
  height: 184px;
}

.meta-content {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  height: 50px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.copy:hover {
  color: #108cd3;
}
</style>